<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{width:100px;height:100px;background: red;position: absolute;left:1000px;}
        .line{width:1px;height:500px;position:absolute;left:400px;top:0;background:black;}
    </style>
</head>
<body>
    <div class="box"></div>
    <div class="line"></div>
    <script>
        const box = document.querySelector('.box')
        const line = document.querySelector('.line')
        const linepos = parseInt(getComputedStyle(line).left)
        // console.log(linepos)
        // console.log(parseFloat(getComputedStyle(box).left) - 10)
        let speed = 200
        document.onclick = function(e){
            let eve = e || window.event
            let t = setInterval(function(){
                // speed = speed / 2
                // speed = speed >= 1 ? speed / 2 : 1
                speed = (box.offsetLeft - linepos) / 10
                console.log(speed)
                if(parseFloat(getComputedStyle(box).left) > 401){
                    // console.log(parseFloat(getComputedStyle(box).left) - speed)
                    box.style.left = parseFloat(getComputedStyle(box).left) - speed + 'px'
                    console.log(box.style.left)
                }else{
                    clearInterval(t)
                    console.log('clear')
                }
            },16)
        }
    </script>
</body>
</html>